<template>
  <div class="com-tabBar">
    <div class="warp">
      <a v-for="item of tabBar" :key="item.name" :open-type="item.openType" hover-stay-time="100" @click="nvclick(item.pagePath)">
        <div :class="item.name">
          <img mode="aspectFit" :src="item.selected ? item.selectedIcon : item.iconPath" class="icon" v-if="item.name == 'create'">
          <p :class="item.selected ? 'on' : ''">{{item.text}}</p>
          <img src="/static/img/index/select_bot.png" v-if="item.selected" class="status">
        </div>
      </a>
    </div>
    <div class="tc"></div>
  </div>
</template>

<script>
import { currentPage } from '@/utils/index'

export default {
  data () {
    return {
      tabBar: [
        {
          name: 'home',
          text: '主页',
          openType: 'redirect',
          pagePath: '/pages/index/main',
          iconPath: '/static/img/home.png',
          selectedIcon: '/static/img/home_on.png',
          selected: false
        },
        {
          name: 'create',
          text: '开团',
          openType: 'navigate',
          pagePath: '/pages/create/main',
          iconPath: '/static/img/index/add_btn.png',
          selectedIcon: '/static/img/btn_add.png',
          selected: false
        },
        {
          name: 'mine',
          text: '我的',
          openType: 'redirect',
          pagePath: '/pages/mine/main',
          iconPath: '/static/img/mine.png',
          selectedIcon: '/static/img/mine_on.png',
          selected: false
        }
      ]
    }
  },
  methods: {
    nvclick (href) {
      if (href == currentPage()) {
        return;
      }
      if (href == '/pages/create/main') {
        wx.navigateTo({
          url: href
        })
      } else {
        wx.reLaunch({
          url: href
        })
      }
    },
    getHistory () {
      var cPage = currentPage();
      for (var i in this.tabBar) {
        this.tabBar[i].selected = false;
        (this.tabBar[i].pagePath == cPage) && (this.tabBar[i].selected = true);
      }
    },
  },
  beforeMount () {
    this.getHistory();
  }
}
</script>

<style lang="stylus" scoped>
.com-tabBar {
  .tc {
    height: 160rpx
  }
  .navigator-hover {
    img {
      transform: scale(0.88, 0.88)
      transition: transform .2s ease-in-out
    }
    background: #fff
  }
  .warp {
    bottom: 0
    left: 0
    width: 100%
    position: fixed
    display: flex
    background: #fff
    border-top: 1px solid #f3f3f3
    a {
      flex: 1
      width: 0
      position: relative
    }
    .home, .create, .mine {
      img {
        width: 52rpx
        margin: 10rpx auto
        display: block
        height: 52rpx
      }
      .status {
        width: 78rpx
        height: 6rpx
        position: absolute
        left: 0
        right: 0
        bottom: 0
        margin: 0 auto
      }
      p {
        color: #b6b6b6
        font-size: 36rpx
        text-align: center
        line-height: 96rpx
      }
      .on {
        color: #f40009
      }
    }
    .create {
      top: -68rpx
      left: 0
      right: 0
      position: absolute
      .status {
        display: none
      }
      .icon {
        width: 166rpx
        height: 166rpx
        margin: 0 auto
      }
      p {
        display: none
      }
    }
  }
}

</style>
